import React, { useEffect, useState } from 'react'
import { Layout, Menu } from 'antd';
import { AntDesignOutlined } from '@ant-design/icons';
import './SideMenu.css'
import { withRouter } from 'react-router-dom';
import { getRights } from '../../api/api'
const { Sider } = Layout;
function SideMenu(props) {
    const [items, setItems] = useState([]);
    const selectKeys = props.location.pathname === "/" ? ["/home"] : [props.location.pathname];
    const openKeys = ["/" + props.location.pathname.split("/")[1]]
    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    function getItem(label, key, icon, children, type) {
        return {
            key,
            icon,
            children,
            label,
            type,
        };
    }
    const iconList = {
        '/home': <AntDesignOutlined />,
        '/user-manage': <AntDesignOutlined />,
        '/user-manage/list': <AntDesignOutlined />,
        '/right-manage': <AntDesignOutlined />,
        '/right-manage/role/list': <AntDesignOutlined />,
        '/right-manage/right/list': <AntDesignOutlined />,
        '/news-manage': <AntDesignOutlined />,
        '/news-manage/add': <AntDesignOutlined />,
        '/news-manage/draft': <AntDesignOutlined />,
        '/news-manage/category': <AntDesignOutlined />,
        '/audit-manage': <AntDesignOutlined />,
        '/audit-manage/audit': <AntDesignOutlined />,
        '/audit-manage/list': <AntDesignOutlined />,
        '/publish-manage': <AntDesignOutlined />,
        '/publish-manage/unpublished': <AntDesignOutlined />,
        '/publish-manage/published': <AntDesignOutlined />,
        '/publish-manage/sunset': <AntDesignOutlined />,
    }
    useEffect(() => {
        const httpRequest = async () => {
            //获取权限列表信息
            const res = await getRights()
            setItems(res.data.data.map(item => {
                return renderMunu(item)
            }))
        }
        httpRequest()
    }, [])
    const renderMunu = (item) => {
        if (item.grade !== 1 && !rights.includes(item.key)) {
            return;
        } else if (item.grade === 1) {
            if (!rights.includes(item.key)) {
                if (!item.children.some(iitem => rights.includes(iitem.key))) {
                    return;
                }
            }
        }
        if (item.children?.length > 0 && item.pagepermisson === 1) {
            return getItem(item.title, item.key, iconList[item.key], item.children.map(item => {
                return renderMunu(item)
            }))
        }
        return item.pagepermisson === 1 && getItem(item.title, item.key, iconList[item.key])
    }
    return (
        <Sider trigger={null} collapsible collapsed={props.collapsed}>
            <div style={{ display: "flex", height: "100%", "flexDirection": "column" }}>
                <div className="logo">萌绘后台管理系统</div>
                <div style={{ flex: 1, "overflow": "auto" }}>
                    <Menu
                        selectedKeys={selectKeys}
                        defaultOpenKeys={openKeys}
                        mode="inline"
                        theme="dark"
                        items={items}
                        onClick={(e) => {
                            props.history.push(e.key)
                        }}
                    />
                </div>
            </div>
        </Sider>
    )
}

export default withRouter(SideMenu)
